<template>
  <div>
    <!--编辑目录名dialog-->
    <el-dialog
        v-model="editDialogVisible"
        title="输入新名称"
        width="25%"
    >
      <el-form
          :model="editCatalogForm"
          label-width="5vw"
          :rules="addFirstCatalogRules"
          ref="editCatalogFormRef"
          label-position="left"
      >
        <el-form-item label="文件夹名" prop="newFileName">
          <el-input v-model="editCatalogForm.listName" type="text" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onEdit(editCatalogFormRef)">确认修改</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--添加一级目录dialog-->
    <el-dialog
        v-model="addFirstCatalogVisible"
        title="输入文件名"
        width="25%"
    >
      <el-form
          :model="addFirstCatalogForm"
          label-width="5vw"
          :rules="addFirstCatalogRules"
          ref="addFirstCatalogRef"
          label-position="left"
      >
        <el-form-item label="文件名" prop="newFileName">
          <el-input v-model="addFirstCatalogForm.fileName" type="text" />
        </el-form-item>
        <el-select v-model="firstValue" class="m-2" placeholder="请选择查看权限">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-form-item>
          <el-button type="primary" @click="onAddFirst(addFirstCatalogRef)">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--添加子目录dialog-->
    <el-dialog
        v-model="addSonCatalogVisible"
        title="输入文件名"
        width="25%"
    >
      <el-form
          :model="addSonCatalogForm"
          label-width="5vw"
          :rules="addSonCatalogFormRules"
          ref="addSonCatalogFormRef"
          label-position="left"
      >
        <el-form-item label="文件名" prop="newFileName">
          <el-input v-model="addSonCatalogForm.fileName" type="text" />
        </el-form-item>
        <el-select v-model="sonValue" class="m-2" placeholder="请选择查看权限">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-form-item>
          <el-button type="primary" @click="onAddSon(addSonCatalogFormRef)">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--删除dialog-->
    <el-dialog
        v-model="delDialogVisible"
        width="15%"
    >
      <span>此操作会删除此目录下的所有文件及文件夹,确认删除?</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="onDel(row)">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, ElSelect} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import {editlist, addlist, dellist, delfile} from "@/api/index.js";
const editDialogVisible = ref(false)
const addFirstCatalogVisible = ref(false)
const addSonCatalogVisible = ref(false)
const delDialogVisible = ref(false)
// 表单ref标签
const editCatalogFormRef = ref()
const addFirstCatalogRef = ref()
const addSonCatalogFormRef = ref()
// 当前正在编辑的row
let currentRow = reactive({})
// 编辑目录名表单
const editCatalogForm = reactive({
  listName:''
})
// 添加parentId为0的目录的表单
const addFirstCatalogForm = reactive({
  fileName:''
})
// 添加parentId不为0的目录的表单
const addSonCatalogForm = reactive({
  fileName:''
})

// 编辑目录名的验证规则
const addFirstCatalogRules = {
  newCatalogName:[
    { required: true, message: '文件名不能为空', trigger: 'blur' },
  ]
}
// 编辑目录名的验证规则
const addSonCatalogFormRules = {
  newCatalogName:[
    { required: true, message: '文件名不能为空', trigger: 'blur' },
  ]
}
//emits
const emits = defineEmits(['reLoadFileList'])

//userinfo
let obj
//权限等级选择
let options = ref([])
// 权限选择
const sonValue = ref()
const firstValue = ref()
onMounted(()=>{
  if(!localStorage.getItem('syhyDocManSys')){
    ElMessage({
      message:'请先登录',
      type:'error'
    })
    return router.push('/login')
  }else {
      obj = JSON.parse(localStorage.getItem('syhyDocManSys'))
  }

  for (let i = obj.root; i<3; i++){
    options.value.push({
      value: i,
      label: `${i}级`,
    })
  }
})
/*编辑目录名方法*/
const showEditDialog = (row)=>{
  editDialogVisible.value = true
  currentRow = row
}
const onEdit = async (el)=>{
  const v = await el.validate()
  if(v){
    const {data:res} = await editlist({
      listId:currentRow.key,
      newListName:editCatalogForm.listName,
      userId:obj.id
    })
    if(res.code === 200){
      ElMessage({
        message:'修改成功!',
        type:'success'
      })
    } else if(res.code === 400){
      ElMessage({
        message:'修改失败,请重试',
        type:'info'
      })
    } else if(res.code === 403){
      ElMessage({
        message:'请填写正确文件名',
        type:'info'
      })
    } else if(res.code === 401){
      ElMessage({
        message:'不能与原文件夹名称一致',
        type:'info'
      })
    } else {
      ElMessage({
        message:'当前文件夹不存在,请刷新后重试',
        type:'info'
      })
    }
    editCatalogForm.listName = ''
    emits('reLoadFileList') //刷新
    closeDialog() //关闭对话框
  }
}
/*添加一级目录方法*/
const showAddFirstCatalogDialog = ()=>{
  addFirstCatalogVisible.value = true
}

const onAddFirst = async (el)=>{
  try {
    const v = await el.validate()
    if(sonValue.value === null){
      return ElMessage({
        message:'请选择权限',
        type:'warning'
      })
    }
    if(v){
      const {data : res} = await addlist({
        listname :addFirstCatalogForm.fileName,
        userId:obj.id,
        root:firstValue.value
      })
      if(res.code === 200){
        ElMessage({
          message:'创建成功!',
          type:'success'
        })
        firstValue.value = null
        addFirstCatalogForm.fileName = ''
        closeDialog()
        emits('reLoadFileList') //刷新
      } else {
        ElMessage({
          message:'创建失败!',
          type:'error'
        })
        firstValue.value = null
        addFirstCatalogForm.fileName = ''
      }
    }
  } catch (e) {
    console.log(e)
  }
}
/*添加子目录方法*/
const showAddSonCatalogDialog = (row)=>{
  addSonCatalogVisible.value = true
  currentRow = row
}

const onAddSon = async (el)=>{
  try {
    const v = await el.validate()
    if(sonValue.value === null){
      return ElMessage({
        message:'请选择权限',
        type:'warning'
      })
    }
    if(v){
      const {data : res} = await addlist({
        parentId : currentRow.key,
        listname :addSonCatalogForm.fileName,
        userId:obj.id,
        root:sonValue.value
      })
      if(res.code === 200){
        ElMessage({
          message:'创建成功!',
          type:'success'
        })
        sonValue.value = null
        addSonCatalogForm.fileName = ''
        closeDialog()
        emits('reLoadFileList') //刷新
      } else {
        ElMessage({
          message:'创建失败!',
          type:'error'
        })
        sonValue.value = null
        addSonCatalogForm.fileName = ''
      }
    }
  } catch (e) {
    console.log(e)
  }
}

/*删除目录名方法*/
const showDelDialog = (row)=>{
  delDialogVisible.value = true
  currentRow = row
}

const onDel = async ()=>{
  // const {data:res} = await dellist({
  const data = await dellist({
    listId:currentRow.listId,
    userId:obj.id
  })
  /*if(res.code === 200){
    ElMessage({
      message:'删除成功!',
      type:'success'
    })
  }*/
  closeDialog()
  emits('reLoadFileList') //刷新

}

/*公共方法*/
const closeDialog = () =>{
  editDialogVisible.value = addFirstCatalogVisible.value = addSonCatalogVisible.value = delDialogVisible.value = false
}

defineExpose({
  showEditDialog,
  showAddFirstCatalogDialog,
  showAddSonCatalogDialog,
  showDelDialog
})
</script>

<style scoped lang="less">
.m-2{
  margin-top: 1vh;
  margin-bottom: 1.5vh;
  //padding-left: 2vw;
}
</style>